<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<jsp:include page="common.jsp"></jsp:include>
<link rel="stylesheet" href="css/layui.css" media="all">
<link rel="stylesheet" href="css/formSelects-v4.css" media="all">
<style type="text/css">
.clear {
	clear: both
}
</style>
</head>
<body>


	<div style="padding: 20px; background-color: #F2F2F2;">
		<div class="layui-row layui-col-space15">

			<div class="layui-card">
				<div class="layui-card-header">
					<i class="layui-icon">&#xe615;</i> 筛选搜索
				</div>
				<div class="layui-card-body">
					<div class="layui-col-md12">
						<!-- 表单搜索开始 -->
						<form class="layui-form" action="">
							<div class=" layui-col-md3">

								<div class="layui-form-item"
									style="width: 280px; display: inline-block;">
									<label class="layui-form-label">输入搜索</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title"
											autocomplete="off" placeholder="商品名称" class="layui-input">
									</div>
								</div>
							</div>

							<div class="layui-col-md3">
								<div class="layui-form-item"
									style="width: '280px'; display: inline-block;">
									<label class="layui-form-label">商品货号</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title"
											autocomplete="off" placeholder="商品货号" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-col-md4">


								<div class="layui-form-item">
									<label class="layui-form-label">商品分类</label>
									<div class="layui-input-block">
										<select name="city" xm-select="select15" xm-select-max="1">
											<option value="">请选择, 此处是联动多选</option>
										</select>
									</div>
								</div>
							</div>
							<div class="layui-col-md2">

								<button type="button" class="layui-btn">重置</button>
								<button type="button" class="layui-btn">搜索</button>

							</div>
							<div class="layui-row">
								<div class="layui-col-md3 ">

									<div class="layui-inline">
										<label class="layui-form-label">添加时间</label>
										<div class="layui-input-inline">
											<input type="text" class="layui-input" id="date1"
												placeholder="yyyy-MM-dd">
										</div>
									</div>
								</div>
								
							</div>
						</form>
						<!-- 表单搜索结束-->
					</div>
					<div class="clear"></div>
				</div>
			</div>

		</div>
	</div>
	<!-- 中间的数据列表 -->
	<div style="padding: 20px; background-color: white;">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-xs10">
				<div class="layui-card">
					<div class="layui-card-header">
						<i class="layui-icon">&#xe62a;</i> 数据列表
					</div>
				</div>
			</div>
			<div class="layui-col-xs">
				<button type="button" class="layui-btn">
					<i class="layui-icon">&#xe608;</i> 添加
				</button>
			</div>
		</div>
	</div>
	<!-- 数据展示区 -->

	<!-- 数据展示区结束 -->
	<script src="layui.all.js" type="text/javascript" charset="utf-8"></script>
	<script src="formSelects-v4.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var laydate;
		var element
		
		$(document).ready(function(){
			$.post("${base}finalProductServlet.do",{method:"initCateList"},function(data){
				
			})
		})
		
		//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
		layui.use(['element','laydate'], function() {
			element = layui.element;
			laydate=layui.laydate;

		});
		
		 laydate.render({
			 elem: '#date1'
		});
		 laydate.render({
			 elem: '#date2'
		});
		var formSelects = layui.formSelects;
		//ajax后台获取数据
		
		 layui.formSelects.data('select15', 'local', {
	            arr: [
	                {
	                    "name": "北京", 
	                    "value": 1, 
	                    "children": [
	                        {"name": "北京市1", "value": 12, "children": [
	                            {"name": "朝阳区1", "value": 13, "children": []},
	                            {"name": "朝阳区2", "value": 14, "children": []},
	                            {"name": "朝阳区3", "value": 15, "children": []},
	                            {"name": "朝阳区4", "value": 16, "children": []},
	                        ]},
	                        {"name": "北京市2", "value": 17, "children": []},
	                        {"name": "北京市3", "value": 18, "children": []},
	                        {"name": "北京市4", "value": 19, "children": []},
	                    ]
	                },
	                {
	                    "name": "天津", 
	                    "value": 2, 
	                    "children": [
	                        {"name": "天津市1", "value": 51, "children": []},
	                    ]
	                },
	            ],
	            linkage: true
	        });
		
	       
	</script>
</body>
</html>